<template>
  <div>
    <!-- <div id="container"></div> -->
  </div>
</template>

<script>
import * as THREE from "three";
export default {
  name: "Three",
  // props: {
  //   msg: String
  // },
  data() {
    return {
      camera: null,
      scene: null, //这个场景不能够放在data中进行使用
      renderer: null,
      mesh: null, //这个场景不能够放在data中进行使用
      point: {},
      box: {},
    };
  },
  methods: {
    init: function () {
      var scene = new THREE.Scene();
      /**
       * 创建网格模型
       */
      this.box = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象
      var material = new THREE.MeshLambertMaterial({ color: 0x0000ff }); //材质对象
      var mesh = new THREE.Mesh(this.box, material); //网格模型对象
      scene.add(mesh); //网格模型添加到场景中
      /**
       * 光源设置
       */
      //点光源
      this.point = new THREE.PointLight(0xffffff);
      this.point.position.set(400, 200, 300); //点光源位置
      scene.add(this.point); //点光源添加到场景中
      //环境光
      var ambient = new THREE.AmbientLight(0x444444);
      scene.add(ambient);
      /**
       * 相机设置
       */
      var width = window.innerWidth; //窗口宽度
      var height = window.innerHeight; //窗口高度
      var k = width / height; //窗口宽高比
      var s = 100; //三维场景缩放系数
      //创建相机对象
      this.camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
      this.camera.position.set(200, 300, 200); //设置相机位置
      this.camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
      /**
       * 创建渲染器对象
       */
      this.renderer = new THREE.WebGLRenderer();
      this.renderer.setSize(width, height);
      this.renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
      document.body.appendChild(this.renderer.domElement); //body元素中插入canvas对象
      //执行渲染操作
      this.renderer.render(scene, this.camera);
    },
    animate: function () {
      this.mesh = "wo jiushi ni yao de ";
      console.log("你哈");
      console.log(this.mesh);
    },
  },
  mounted() {
    this.init();
    this.animate();
  },
};
</script>

<style scoped>
#container {
  height: 400px;
}
</style>

